<template>
    <div class="table-land-view">
      <vxe-list height="74vh" style="border:1px solid #ddd;"  :data="tableData" :scroll-y="{enabled: true}">
      <template #default="{ items }">
        <!-- <div class="my-list-item" v-for="(item, index) in items" :key="index">{{ item.label }}</div> -->
        <div style="display: flex;padding:10px;position: relative;border-bottom:1px solid #eee;"  v-for="(row, index) in items" 
                    :class="{'selected':row.farmLandId == dropFarmLandId}">
                     <div class="imgBox" >
                              <div class="image-view">      
                                  <Image
                                      :list="[`${urlImage}/lngis/farm/common/static/${row.picSource}`]"
                                      :url="`${urlImage}/lngis/farm/common/static/${row.pic}`"  />
                                   </div>
                                 <div class="tips-icon">{{row.farmLandNo}}</div>
                         </div>
                         <div class="right-view" @click="setMapData(row)">
                           <div class="title">
                                 <span class="name" :title="row.farmLandName">{{row.farmLandName}}</span>
                             </div>
                             <div class="tag-view">
                                 <div class="tag-text">
                                     暂无标签
                                 </div>
                                 <div class="size">
                                     {{Number(row.mapAreaSize||0).toFixed(1)}}亩
                                 </div>
                             </div>
                             <div class="corpname">
                                   {{ row.cropName }},{{ row.cropSeriesName}}
                                 </div>
                         </div>
                         <vxe-icon v-if="showDel" name="delete" @click="delCell(index)" class="btn-delete" status="danger" title="移除" ></vxe-icon>

          </div>
      </template>
    </vxe-list>
      </div>
 </template>
 
 <script setup>
 import {ref} from "vue"
 import Image from '@/components/custom/image.vue'
 const urlImage = ref(import.meta.env.VITE_BASE_PATH)
 const emit = defineEmits(['page-change','onClick','onDelete'])
 const props = defineProps({
     tableData:{
         type:Array,
         default:[]
     },
     pageInfo:{
         type:Object,
         default:{}
     },
     showDel:{
         type:Boolean,
         default:true
     }
 })
 const dropFarmLandId = ref('')
 const pageChangeEvent = ({currentPage, pageSize}) => {
     emit('page-change',{currentPage, pageSize})

 }
   // 表格行单击处理事件
 const setMapData= (row)=>{
     dropFarmLandId.value = row.farmLandId
     emit('onClick',row)
 }
   // 表格行单击处理事件
   const delCell= (index)=>{
     emit('onDelete',index)
 }
 

 </script>
 <style>
 .table-land-view .vxe-body--column{
        padding:0 !important;
     }
     .table-land-view .vxe-table--render-default .vxe-cell{
       padding:0;
     }
     .table-land-view .vxe-pager .vxe-pager--wrapper{
       margin:0 auto;
       flex-grow: 0;
     }
 </style>
 <style lang="scss" scoped>
    .table-land-view{
     height: calc(100vh - 235px);
     padding:0;
     .imgBox{
           position: relative;
           width: 92px;
           height: 78px;
           background-size: cover;
           background-repeat: no-repeat;
           background-position: left top;
           border-radius: 3px;
           flex-shrink: 0;
           .image-view{
             width: 92px; 
             height: 78px;
           }
           .tips-icon{
               position: absolute;
               left: 0;
               top: 0;
               width: 60px;
               height: 30px;
               background: url();
               background-repeat: no-repeat;
               background-position: inherit;
               display: flex;
               justify-content: left;
               font-size: 12px;
               padding:1px 2px;
               color: #fff;
           }
       }
       .right-view{
         padding-left:10px;
         cursor: pointer;
       }
       .title{
           display: flex;
           font-size: 14px;
           overflow: hidden;
           width:150px;
           .name{
               flex: 1;
               white-space: nowrap;
               text-overflow: ellipsis;
               overflow: hidden;
               word-break: break-all;
               font-weight: 500;
               flex-shrink: 0;
               width: 0;
               font-size:15px;
               color: #333;
               font-weight: bold;
           }
           .iocnbtn{
               display: flex;
               align-items: center;
               flex-shrink: 0;
           }
         }
           .tipsbox{
               display: flex;
               span{
                   background: #FFF5E5;
                   border-radius: 2px;
                   height: 26px;
                   padding: 0 8px;
                   font-size:14px;
               }
           }
           .tag-view{
               display: flex;
               justify-content: space-between;
               align-items: center;
               padding-top:10px;
               padding-right: 10px;
               .tag-text{
                   font-size: 12px;
                   background-color: #eee;
                   padding:2px 5px;
               }
               .size{
                       font-weight: 400;
                       color: #999999;
                       font-size:14px;
                   }
           }
           .corpname{
             color: #ff9c00;
             font-size:13px;
           }
           .btn-delete{
              position: absolute;
              bottom:10px;
              right:10px;
              font-size:16px;    
              font-weight: bold;
              z-index:99;
              cursor: pointer;
           }
       .selected{
             background-color: #EBF9F4; 
             &::before{
                 content: '';
                 position: absolute;
                 left: 0;
                 top: 0;
                 width: 4px;
                 height: 100%;
                 background-color: #04AE70;
                 z-index:9;
             }
         }
   }
 </style>
